<script class="_dcdev_preset_">
    // 字段格式化相关函数
    {
        var filter_name = "";
        var old_form_data;
        var all_dc_render_data_;
        //输入监听及判断
        function _input_event_(type, column_name, max_value, min_value, is_require, is_multi_line) {
            switch (type) {
                case 'number':
                    var textvalue = $("input[name='" + column_name + "']").val()
                    if (min_value) {
                        if (textvalue < min_value) {
                            if (is_require == "true") {
                                $("#" + column_name + "-tips").html(`输入字数必须在 ${min_value} ~ ${max_value} 之间`).css(
                                    'color', 'red')
                                $("." + column_name + "-label").css('border-color', 'red')
                                $("input[name='" + column_name + "']").css('border-color', 'red')
                            }

                        } else {
                            $("#" + column_name + "-tips").empty()
                            $("." + column_name + "-label").css('border-color', '')
                            $("input[name='" + column_name + "']").css('border-color', '')
                        }
                    }
                    if (max_value) {
                        if (textvalue > parseInt(max_value) - 1) {
                            textvalue = parseInt(max_value)
                            $("#" + column_name + "-tips").html(`输入字数必须在 ${min_value} ~ ${max_value} 之间`).css('color',
                                'red')
                            $("." + column_name + "-label").css('border-color', 'red')
                            $("input[name='" + column_name + "']").css('border-color', 'red')
                        } else {
                            $("#" + column_name + "-tips").empty()
                            $("." + column_name + "-label").css('border-color', '')
                            $("input[name='" + column_name + "']").css('border-color', '')
                        }
                    }
                    $("input[name='" + column_name + "']").val(textvalue)
                    break;
                case 'text':
                    var textlength = is_multi_line ? $("textarea[name='" + column_name + "']").val().length : $(
                        "input[name='" + column_name + "']").val().length;
                    if (textlength < min_value || textvalue > parseInt(max_value) - 1) {
                        if (is_require == "true") {
                            $("#" + column_name + "-tips").html(`输入字数必须在 ${min_value} ~ ${max_value} 之间`).css('color',
                                'red')
                            $("." + column_name + "-label").css('border-color', 'red')
                            $("input[name='" + column_name + "']").css('border-color', 'red')
                        }
                    } else {
                        $("#" + column_name + "-tips").empty()
                        $("." + column_name + "-label").css('border-color', '')
                        $("input[name='" + column_name + "']").css('border-color', '')
                    }
                    break;
                case 'date':
                    var date = new Date($("input[name='" + column_name + "']").val());
                    if (is_require) {
                        if (Date.parse(date)) {
                            //是日期/时间
                            $("." + column_name + "-label").css('border-color', '')
                            $("input[name='" + column_name + "']").css('border-color', '')
                            $("#" + column_name + "-tips").empty()
                        } else {
                            //不是日期时间
                            $("." + column_name + "-label").css('border-color', 'red')
                            $("input[name='" + column_name + "']").css('border-color', 'red')
                            $("#" + column_name + "-tips").html(`请输入正确的日期`).css('color', 'red')
                        }
                    }
                    break;
            }
        }
        function get_text_data(row_data) {
            if (all_dc_render_data_.cb_config.value_changed) {
                var _res = all_dc_render_data_.cb_config.value_changed({
                    data: row_data,
                    new_value: $("input[name='" + row_data.column_name + "']").val(),
                    old_value: old_form_data[row_data.column_name]
                });
                // 如果回调处理了数据则使用，否则使用之前的
            }
            old_form_data[row_data.column_name] = $("input[name='" + row_data.column_name + "']").val()
        }
        //图片型
        function showCutter(column_name, imgid, type) {
            $.getScript("https://res.dcdev.net/dcdev/v1.0.6/assets/js/crop_image.js",
                function () {
                    var data = {
                        //canvas（图片）相关
                        movable: true, //类型,//Boolean，默认值true。是否允许移动图片
                        rotatable: true, //类型,//Boolean，默认值true。是否允许旋转图片。
                        zoomable: true, // 默认true, 是否允许缩放图片。
                        zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
                        zoomOnTouch: true, // 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。） 
                        croppedMaxWidth: 500,
                        croppedMaxHeight: 500,
                        //crop(裁剪框)相关
                        // aspectRatio: 1 / 2, //裁剪框比例  默认NaN   例如:: 1 / 1,//裁剪框比例 1:1                
                        modal: true, //类型:Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
                        cropBoxMovable: true, //默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小
                        autoCrop: true, //类型:Boolean，默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea:类型:Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。highlight:类型:Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
                        guides: true, //类型:Boolean，默认值true。是否在剪裁框上显示虚线。
                        center: true, // 默认true  是否显示裁剪框 中间的+ 
                        cropBoxResizable: true, //是否允许改变裁剪框的大小   
                    };

                    crop_image.crop(data, function (res) {
                        var pid = localStorage["own_pid"];
                        if (!pid)
                            pid = "0000000000000000";
                        var url = "https://www.dcdev.net/" +
                            "lib/lib_of_back_end/v1.0.1/api/dcdev/upload/upload_image_base64.php";
                        var data = {
                            'pid': pid,
                            "storage_type": "localhost",
                            "upload_img": res.cropped_data,
                        };
                        $.ajax({
                            method: "post",
                            dataType: "json",
                            url: url,
                            data: {
                                params: JSON.stringify(data)
                            },
                            success: function (res) {
                                if (res["res"] == 0) {
                                    ui_class.show_error(res['tips'] ? res['tips'] : res[
                                        'desc']);
                                } else {
                                    $("." + column_name + "-label").css('border-color', '')
                                    if (res.res == 1) {
                                        if (type == "is_thumb") {
                                            $('.' + imgid + column_name).html(
                                                `<img  style="width:263px;height:200px" id="${imgid}${column_name}" src="${res.data.thumb_url}">`
                                            )
                                            $(`input[name="${column_name}_thumb"]`).val(res.data
                                                .thumb_url)
                                            $('#' + imgid + column_name).click(function () {
                                                showCutter(column_name, imgid, type)
                                            })

                                        } else if (type == "has_thumb") {
                                            $('.' + imgid + column_name).html(
                                                `<img  style="width:263px;height:200px" id="${imgid}${column_name}" src="${res.data.url}">`
                                            )
                                            $(`input[name="${column_name}"]`).val(res.data.url)
                                            $('#' + imgid + column_name).click(function () {
                                                showCutter(column_name, imgid, type)
                                            })

                                            $('.' + imgid + 'thumb' + column_name).html(
                                                `<img  style="width:263px;height:200px" id="${imgid}thumb${column_name}" src="${res.data.thumb_url}">`
                                            )
                                            $(`input[name="${column_name}_thumb"]`).val(res.data
                                                .thumb_url)
                                            $('#' + imgid + 'thumb' + column_name).click(function () {
                                                showCutter(column_name, imgid, type)
                                            })

                                        } else {
                                            $('.' + imgid + column_name).html(
                                                `<img  style="width:263px;height:200px" id="${imgid}${column_name}" src="${res.data.url}">`
                                            )
                                            $(`input[name="${column_name}"]`).val(res.data.url)
                                            $('#' + imgid + column_name).click(function () {
                                                showCutter(column_name, imgid, type)
                                            })
                                        }
                                        $("#_dc_crop_image_container_").remove()
                                        $("#_dc_crop_image_mask_").remove()
                                    }

                                }
                            }
                        })
                    })
                })
        }

        //颜色型
        function get_color_render(data, i, column_name, is_require) {
            $('.inputor_bgcolor' + column_name).css('border', '1px solid #ddd')
            $('#bgcolor' + column_name + i).css('border', '1px solid #333333')
            $('#' + column_name).val(data)
            if (is_require) {
                $("." + column_name + "-label").css("border-color", "")
            }
        }

        function get_color_data(row_data) {
            if (all_dc_render_data_.cb_config.value_changed) {
                var _res = all_dc_render_data_.cb_config.value_changed({
                    data: row_data,
                    new_value: $('#' + row_data.column_name).val(),
                    old_value: old_form_data[row_data.column_name]
                });
                // 如果回调处理了数据则使用，否则使用之前的
            }
            old_form_data[row_data.column_name] = $('#' + row_data.column_name).val()
        }

        // 深复制对象
        function _deep_clone_(obj) {
            if (!(typeof obj === 'object' && obj)) {
                return null;
            }
            var new_obj = Array.isArray(obj) ? [] : {};
            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    if (typeof obj[key] === 'obj' && obj[key]) {
                        new_obj[key] = deepClone(obj[key]);
                    } else {
                        new_obj[key] = obj[key];
                    }
                }
            }
            return new_obj;
        }

        // 获取指定时间离当前时间的值
        function _get_diff_date_(dateTimeStamp) {
            var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var halfamonth = day * 15;
            var month = day * 30;
            var now = new Date().getTime();
            dateTimeStamp = new Date(dateTimeStamp.replace(/-/g, "/"));
            var diffValue = now - dateTimeStamp;
            if (diffValue < 0) {
                return;
            }
            var monthC = diffValue / month;
            var weekC = diffValue / (7 * day);
            var dayC = diffValue / day;
            var hourC = diffValue / hour;
            var minC = diffValue / minute;
            if (monthC >= 1) {
                result = "" + parseInt(monthC) + "月前";
            } else if (weekC >= 1) {
                result = "" + parseInt(weekC) + "周前";
            } else if (dayC >= 1) {
                result = "" + parseInt(dayC) + "天前";
            } else if (hourC >= 1) {
                result = "" + parseInt(hourC) + "小时前";
            } else if (minC >= 1) {
                result = "" + parseInt(minC) + "分钟前";
            } else
                result = "刚刚";
            return result;
        }

        // 替换指定位置字符串
        function _mask_text_(text, from, count, char) {
            var _text_ = "";
            for (let index = 0; index < count; index++) {
                _text_ += char;
            }
            return text.substr(0, from) + _text_ + text.substr(from + count, text.length - from - count);
        }

        // 点击li触发的事件
        function _dc_click_li_(li, id, key, index) {
            // 获取表格相关配置数据
            _dc_render_data_ = window[`_dc_ul_data_${id}_`];

            if (_dc_render_data_.cb_config.click) {
                res = {
                    li_node: li,
                    li_selector: $(li),
                    li_key: $(li).data("key"),
                    ul_index: index,
                    ul_value: _dc_render_data_.data_fetched.all_data[index],
                };
                _dc_render_data_.cb_config.click(res);
            }
        };

        // 格式化文件大小带单位的字符串
        function _get_file_formated_size_(value, bit) {
            if (null == value || value == '') {
                return "0B";
            }
            var unitArr = new Array("B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
            var index = 0;
            var srcsize = parseFloat(value);
            index = Math.floor(Math.log(srcsize) / Math.log(1024));
            var size = srcsize / Math.pow(1024, index);
            size = size.toFixed(bit); //保留的小数位数
            return size + unitArr[index];
        }

        function insertElement(element, id, class_name = "", style = "") {
            _id = document.getElementById(id);
            if (!_id) {
                _element = document.createElement(element);
                _element.id = id;
                _element.name = id;
                _element.style.cssText = style;
                _element.className = class_name ? class_name : "";
                document.body.appendChild(_element);
            }
        }
    }

    function render_inputor() {
        var that;
        var _dc_render_data_;
        var ul_width = 0;
        var ul_height = 0;
        var current_position = 0;
        var is_loading_data = false;
        render_inputor.prototype.render =
            function (data) {
                // 使用变量保存配置的数据
                this._dc_render_data_ = data;
                filter_name = data.id;
                // 赋值that，与监听内的this作区分
                that = this;
                window[`_dc_ul_data_${that._dc_render_data_.id}_`] = this;
                // 保存所有数据
                this._dc_render_data_.data_fetched = [];
                this._dc_render_data_.data_fetched.all_data = [];
                $(`#${data.id}`).addClass("layui-form");
                $(`#${data.id}`).attr("lay-filter", data.id);

                // 目标div没有设置高度
                if (!document.getElementById(data.id).style.height) {
                    document.getElementById(data.id).style.height = "100%";
                }

                // 根据全局变量数据
                window[`_dc_ul_data_${that._dc_render_data_.id}_`] = data;

                // 设置竖向滚动
                $(`#${this._dc_render_data_.id}`).css("overflow-y", "scroll")
                    .append(
                        `<ul id="_dc_ul_${this._dc_render_data_.id}" class="_dcdev_preset_" style="list-style: none;"></ul>`
                    );

                // 当前页数据
                this._dc_render_data_.data_fetched.page_data = this._dc_render_data_
                    .data_config.data;

                // 渲染表格
                that._dc_render_by_data_(this._dc_render_data_.id, this._dc_render_data_, true, this._dc_render_data_
                    .data_config.data.length);
            }

        // 使用相应配置渲染表格
        render_inputor.prototype._dc_render_by_data_ =
            function (id, _dc_render_data_, is_force_refresh, page_fetched_count = 0) {
                var _ul_html_ = "";
                var _ul_temp_html = "";
                var _li_html_ = "";
                // 以当前页数据渲染表格
                for (let index = 0; index < _dc_render_data_.data_fetched.page_data.length; index++) {
                    const row_data = _deep_clone_(_dc_render_data_.data_fetched.page_data[index]);
                    // 获得li的html模板
                    _temp_li_html = _dc_render_data_.li_config.li_html;
                    switch (row_data.type) {
                        case "color":
                            _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label><div class="colorpicker"></div>
                            <input class="layui-input" type="text" id="${row_data.column_name}"
                                name="${row_data.column_name}" readonly="readonly"
                                style="width: 100px;margin-left: 35px;border-width: 0px;padding-bottom: 10px !important;" value="${row_data.default_value}">
                            <div style="margin-top: -38px;margin-bottom: 5px;">
                                <div id="bgcolor_${row_data.column_name}"></div>
                            </div>
                            <div id="bg_color_${row_data.column_name}" style="margin-top: -6px;">`
                            data = row_data.color_type
                            for (var i = 0; i < data.length; i++) {
                                _temp_li_html +=
                                    `<span class="inputor_bgcolor${row_data.column_name}" id="bgcolor${row_data.column_name}${i}" style="margin-top:10px;margin-right:6px;border:1px solid #ddd;padding: 10px 15px;display: -webkit-inline-box;" onclick="get_color_render('${data[i]}','${i}','${row_data.column_name}',${row_data.is_require})">
                            <span style="width:15px;height:15px;background:${data[i]};color:${data[i]};">22</span>
                            <span style="font-size:12px">${data[i]}</span>
                        </span>                    
                `
                            }
                            _temp_li_html += `</div>`;
                            break;
                        case "html":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            _temp_li_html = row_data.html;
                            break;
                        case "text":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            if (row_data.is_multi_line) {
                                _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
<div>
    <textarea  placeholder="${row_data.place_holder}" style="width:300px;${row_data.is_require ? "border-color:red" : ""}${row_data.style ? row_data.style : ""};"
    oninput="_input_event_('${row_data.type}', '${row_data.column_name}',  ${row_data.max_value}, ${row_data.min_value},'${row_data.is_require}','${row_data.is_multi_line}')" 
    name="${row_data.column_name}" id="${row_data.column_name}" maxlength="${row_data.max_value}">${row_data.default_value}</textarea>
</div>
<div id="${row_data.column_name}-tips"></div>
`
                            } else {
                                _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
<div>
    <input placeholder="${row_data.place_holder}" style="${row_data.is_require ? "border-color:red" : ""};${row_data.style ? row_data.style : ""};" 
    oninput="_input_event_('${row_data.type}', '${row_data.column_name}',  ${row_data.max_value}, ${row_data.min_value},'${row_data.is_require}')" 
    type="text" name="${row_data.column_name}" id="${row_data.column_name}" maxlength="${row_data.max_value}" class="layui-input" value="${row_data.default_value}">
</div>
<div id="${row_data.column_name}-tips"></div>
`
                            }
                            break;
                        case "date":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
<div>
    <input name="${row_data.column_name}" oninput="_input_event_('${row_data.type}', '${row_data.column_name}',  ${row_data.start_date_value}, ${row_data.end_date_value}, '${row_data.is_require}')" id="${row_data.column_name}" type="text" name="title" maxlength="12" class="layui-input">
</div>
<div id="${row_data.column_name}-tips"></div>
`
                            break;
                        case "number":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
<i id="${row_data.column_name}-left" class="layui-icon layui-icon-left"></i>
<input onblur="_input_event_('${row_data.type}', '${row_data.column_name}',  ${row_data.max_value}, ${row_data.min_value},'${row_data.is_require}')" type="number" value="${row_data.default_value}" name="${row_data.column_name}" class="layui-input" style="display:inline-block;margin-bottom: 5px;width: 100px; text-align: right; padding:0 6px 0 5px;">
<i id="${row_data.column_name}-right" class="layui-icon layui-icon-right"></i>
<div id="${row_data.column_name}-tips"></div>
`

                            break;
                        case "option":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
<div class="">`;
                            for (var i = 0; i < row_data.options.length; i++) {
                                _temp_li_html +=
                                    `<input type="radio" lay-filter="${row_data.column_name}" title="${row_data.options_title[i]}" value="${row_data.options[i]}" name="${row_data.column_name}" ${row_data.options[i] == row_data.default_value ? "checked" : ''}>`

                            }
                            _temp_li_html += `</div>`
                            break;
                        case "bool":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
<div class="">
    <input type="radio" title="${row_data.tvalue}"  lay-filter="${row_data.column_name}" value="${row_data.tvalue}" name="${row_data.column_name}" ${row_data.tvalue == row_data.default_value ? "checked" : ''}>
    <input type="radio" title="${row_data.fvalue}" lay-filter="${row_data.column_name}" value="${row_data.fvalue}" name="${row_data.column_name}" ${row_data.fvalue == row_data.default_value ? "checked" : ''}></div>
</div>
`
                            break;
                        case "checkbox":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            _temp_li_html = `
<label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
<div class="">`;
                            for (var i = 0; i < row_data.options.length; i++) {
                                _temp_li_html +=
                                    `<input type="checkbox" lay-filter="${row_data.column_name}" title="${row_data.options_title[i]}" value="${row_data.options[i]}" name="${row_data.column_name}" >`
                            }
                            _temp_li_html += `</div>`

                            break;
                        case "image":
                            if (row_data.hidden) {
                                _temp_li_html = ``;
                                break;
                            }
                            _temp_li_html = `
<div class="layui-form-item"  id="component${row_data.column_name}">
    <label class="dcdev-title ${row_data.column_name}-label" style="width:100%;${row_data.is_require ? "border-color:red" : ""}">${row_data.title}</label>
    <div class="layui-upload" style="margin-left:10px">
        <div class="layui-upload-list">
            <div class="finalImg${row_data.column_name}">
                <div style="width:200px" class="layui-upload-drag" onclick="showCutter('${row_data.column_name}','finalImg','${row_data.has_thumb ? "has_thumb" : ""}')" id="replaceImg${row_data.column_name}">
                <div>
                <i class="layui-icon layui-icon-upload" ></i>
                <p style="color:#000">上传原图</p>
                </div>
                </div>
                </div>
                <span id="imgwid"></span>
                <span id="imghei"></span>
                <p id="demoText"></p>
                </div>
                <div style="display:flex" id="editorId_date_choice">
                <input id="editorId_date_choice_input1" name="${row_data.column_name}" class="layui-input origin" type="text" style="width:260px">
                <div id="editorId_date_choice_button1" style="margin-left:10px;border-radius: 5px" class="layui-btn layui-btn-primary">...</div>
        </div>
    </div>
    <div class="ishasthumb${row_data.column_name}"></div>
</div>
`
                            if (row_data.has_thumb) {
                                _temp_li_html += `
<div class="layui-upload uploadabridge" style="margin-left:10px">
    <div class="layui-upload-list">
        <div class="finalImgthumb${row_data.column_name}">
            <div style="width:200px" class="layui-upload-drag" id="replaceImgthumb${row_data.column_name}"  onclick="showCutter('${row_data.column_name}','finalImgthumb','is_thumb')">
                <div>
                <i class="layui-icon layui-icon-upload"></i>
                <p style="color:#000">上传缩略图</p>
                </div>
            </div>
        </div>
        <span id="imgwid${row_data.column_name}"></span>
        <span id="imghei${row_data.column_name}"></span>
        <p id="demoText${row_data.column_name}"></p>
    </div>
    <div style="display:flex">
            <input name="${row_data.column_name}_thumb" class="layui-input thumb" type="text" style="width:260px">
            <div style="margin-left:10px;border-radius: 5px" class="layui-btn layui-btn-primary">...</div>
    </div>
</div>
`
                            }
                            break;
                        default:
                            _temp_li_html = `<div></div>`
                            break;
                    }
                    // 将html模板中的#{}替换为字段名
                    for (var key in row_data) {
                        var item = row_data[key];
                        // 得到待替换的字段名
                        re = new RegExp(`#{${key}}`, "g");
                        _temp_li_html = _temp_li_html.replace(re, row_data[key]);
                    }

                    _li_html_ += _temp_li_html;
                    _ul_temp_html =
                        `<ul class="${_dc_render_data_.ul_config.ul_class}" style="float:left;${_dc_render_data_.ul_config.ul_style}"><li class="${_dc_render_data_.li_config.li_class}" style="${_dc_render_data_.li_config.li_style}">${_li_html_}</li></ul>`;
                    // 即将渲染时的回调，如需渲染前干预可在此操作
                    if (_dc_render_data_.cb_config.before_render) {
                        var _res = _dc_render_data_.cb_config.before_render({
                            data: row_data,
                            html: _ul_temp_html,
                            index: _dc_render_data_.data_fetched.all_data.length + index - page_fetched_count,
                        });
                        // 如果回调处理了数据则使用，否则使用之前的
                        _ul_temp_html = (_res && _res.html) ? _res.html : _ul_temp_html;
                    }

                    _ul_html_ += _ul_temp_html;
                    _li_html_ = "";
                    _ul_temp_html = "";
                }
                // 拼接table
                _ul_html_ =
                    `<table id="_dc_render_${_dc_render_data_.id}_" class="${_dc_render_data_.ul_config.table_class}" style="${_dc_render_data_.ul_config.table_style};cursor:default;" id="_dc_ul_${_dc_render_data_.id}_body_" width="100%">${_ul_html_}</table>`

                // 强制刷新模式则不追加内容，直接替换
                if (is_force_refresh) {
                    $("#_dc_ul_" + _dc_render_data_.id).html(_ul_html_);

                } else {
                    $("#_dc_ul_" + _dc_render_data_.id).html($("#_dc_ul_" + _dc_render_data_.id).html() +
                        _ul_html_);
                }
                layui.use(['element', 'layer', 'form', 'colorpicker', 'laydate'], function () {
                    var form = layui.form;
                    element = layui.element;
                    laydate = layui.laydate;
                    colorpicker = layui.colorpicker;
                    element.render();
                    form.render();
                    old_form_data = form.val(_dc_render_data_.id)
                    all_dc_render_data_ = _dc_render_data_
                    for (let index = 0; index < _dc_render_data_.data_fetched.page_data.length; index++) {
                        const row_data = _deep_clone_(_dc_render_data_.data_fetched.page_data[index]);
                        switch (row_data.type) {
                            case "text":
                                if (row_data.is_multi_line) {
                                    $("textarea[name='" + row_data.column_name + "']").bind('input', function () {
                                        get_text_data(row_data)
                                    })
                                } else {
                                    $("input[name='" + row_data.column_name + "']").bind('input', function () {
                                        get_text_data(row_data)
                                    })

                                }
                                break;
                            case "color":
                                $(".inputor_bgcolor" + row_data.column_name).click(function () {
                                    get_color_data(row_data)
                                })
                                colorpicker.render({
                                    elem: '#bgcolor_' + row_data.column_name,
                                    color: row_data.default_value,
                                    done: function (res) {
                                        $('#' + row_data.column_name).val(res)
                                        if (row_data.is_require) {
                                            if (res) {
                                                $("." + row_data.column_name + "-label").css("border-color", "")
                                            } else {
                                                $("." + row_data.column_name + "-label").css(
                                                    'border-color', 'red')
                                            }
                                        }
                                        if (_dc_render_data_.cb_config.value_changed) {
                                            var _res = _dc_render_data_.cb_config.value_changed({
                                                data: row_data,
                                                new_value: res,
                                                old_value: old_form_data[row_data.column_name]
                                            });
                                            // 如果回调处理了数据则使用，否则使用之前的
                                        }
                                        old_form_data[row_data.column_name] = res
                                    }
                                });
                                break;
                            case "date":
                                laydate.render({
                                    elem: '#' + row_data.column_name,
                                    value: row_data.default_value,
                                    min: row_data.start_date_value,
                                    max: row_data.end_date_value,
                                    done: function (value, date, endDate) {
                                        if (!value) {
                                            $("." + row_data.column_name + "-label").css(
                                                'border-color', 'red')
                                            $("input[name='" + row_data.column_name + "']").css(
                                                'border-color', 'red')
                                            $("#" + row_data.column_name + "-tips").html(`请输入正确的日期`)
                                                .css('color', 'red')
                                        } else {
                                            $("." + row_data.column_name + "-label").css(
                                                'border-color', '')
                                            $("input[name='" + row_data.column_name + "']").css(
                                                'border-color', '')
                                            $("#" + row_data.column_name + "-tips").empty()
                                        }
                                        if (all_dc_render_data_.cb_config.value_changed) {
                                            var _res = all_dc_render_data_.cb_config.value_changed({
                                                data: row_data,
                                                new_value: $("#" + row_data.column_name  ).val(),
                                                old_value: old_form_data[row_data.column_name]
                                            });
                                            // 如果回调处理了数据则使用，否则使用之前的
                                        }
                                        old_form_data[row_data.column_name] = $("#" + row_data.column_name  ).val()
                                    }
                                    //,type: 'date' //默认，可不填
                                })
                                break;
                            case "number":
                                // $("input[name='" + row_data.column_name + "']").bind('input')
                                $("input[name='" + row_data.column_name + "']").bind('input', function () {
                                    get_text_data(row_data)
                                })
                                $("#" + row_data.column_name + "-left").click(function () {
                                    if (parseInt($("input[name='" + row_data.column_name + "']")
                                        .val()) - 1 >= row_data.min_value) {
                                        $("input[name='" + row_data.column_name + "']").val(parseInt($(
                                            "input[name='" + row_data.column_name + "']")
                                            .val()) - 1)
                                        if ($("." + row_data.column_name + "-label").css(
                                            'border-color') == "rgb(255, 0, 0)" && row_data
                                                .is_require
                                        ) {
                                            $("." + row_data.column_name + "-label").css('border-color',
                                                '')
                                            $("input[name='" + row_data.column_name + "']").css(
                                                'border-color', '')
                                            $("#" + row_data.column_name + "-tips").empty()
                                        }
                                    } else {
                                        if ($("#" + row_data.column_name + "-tips").html() == "" &&
                                            row_data.is_require) {
                                            $("." + row_data.column_name + "-label").css('border-color',
                                                'rgb(255, 0, 0)')
                                            $("input[name='" + row_data.column_name + "']").css(
                                                'border-color', 'red')
                                            $("#" + row_data.column_name + "-tips").html(
                                                `输入数值必须在 ${row_data.min_value} ~${row_data.max_value} 之间`
                                            ).css('color', 'red')
                                        }
                                    }
                                    if (all_dc_render_data_.cb_config.value_changed) {
                                        var _res = all_dc_render_data_.cb_config.value_changed({
                                            data: row_data,
                                            new_value: $("input[name='" + row_data.column_name + "']").val(),
                                            old_value: old_form_data[row_data.column_name]
                                        });
                                        // 如果回调处理了数据则使用，否则使用之前的
                                    }
                                    old_form_data[row_data.column_name] = $("input[name='" + row_data.column_name + "']").val()
                                })
                                $("#" + row_data.column_name + "-right").click(function () {
                                    if (parseInt($("input[name='" + row_data.column_name + "']")
                                        .val()) + 1 <= row_data.max_value) {
                                        $("input[name='" + row_data.column_name + "']").val(parseInt($(
                                            "input[name='" + row_data.column_name + "']")
                                            .val()) + 1)
                                        if ($("." + row_data.column_name + "-label").css(
                                            'border-color') == "rgb(255, 0, 0)" && row_data
                                                .is_require
                                        ) {
                                            $("." + row_data.column_name + "-label").css('border-color',
                                                '')
                                            $("input[name='" + row_data.column_name + "']").css(
                                                'border-color', '')
                                            $("#" + row_data.column_name + "-tips").empty()
                                        }
                                    } else {
                                        if ($("#" + row_data.column_name + "-tips").html() == "" &&
                                            row_data.is_require) {
                                            $("." + row_data.column_name + "-label").css('border-color',
                                                'rgb(255, 0, 0)')
                                            $("input[name='" + row_data.column_name + "']").css(
                                                'border-color', 'red')
                                            $("#" + row_data.column_name + "-tips").html(
                                                `输入数值必须在 ${row_data.min_value} ~${row_data.max_value} 之间`
                                            ).css('color', 'red')
                                        }
                                    }
                                    if (all_dc_render_data_.cb_config.value_changed) {
                                        var _res = all_dc_render_data_.cb_config.value_changed({
                                            data: row_data,
                                            new_value: $("input[name='" + row_data.column_name + "']").val(),
                                            old_value: old_form_data[row_data.column_name]
                                        });
                                        // 如果回调处理了数据则使用，否则使用之前的
                                    }
                                    old_form_data[row_data.column_name] = $("input[name='" + row_data.column_name + "']").val()
                                })
                                break;
                            case "option":
                                form.on('radio(' + row_data.column_name + ')', function (obj) {
                                    if (_dc_render_data_.cb_config.value_changed) {
                                        var _res = _dc_render_data_.cb_config.value_changed({
                                            data: row_data,
                                            new_value: obj.value,
                                            old_value: old_form_data[row_data.column_name]
                                        });
                                        // 如果回调处理了数据则使用，否则使用之前的
                                    }
                                    console.log(obj)
                                    console.log("test")
                                })
                                break;
                            case "bool":
                                form.on('radio(' + row_data.column_name + ')', function (obj) {
                                    if (_dc_render_data_.cb_config.value_changed) {
                                        var _res = _dc_render_data_.cb_config.value_changed({
                                            data: row_data,
                                            new_value: obj.value,
                                            old_value: old_form_data[row_data.column_name]
                                        });
                                        // 如果回调处理了数据则使用，否则使用之前的
                                    }
                                })
                                break;
                            case "checkbox":
                                old_checkbox_data = []
                                $('input[name="' + row_data.column_name + '"]:checked').each(function () {
                                    old_checkbox_data.push({ [$(this).attr('title')]: obj })
                                });
                                old_form_data[row_data.column_name] = old_checkbox_data
                                form.on('checkbox(' + row_data.column_name + ')', function (obj) {
                                    checkbox_data = []
                                    $('input[name="' + row_data.column_name + '"]:checked').each(function () {
                                        checkbox_data.push({ [$(this).attr('title')]: obj })
                                    });
                                    if (_dc_render_data_.cb_config.value_changed) {
                                        var _res = _dc_render_data_.cb_config.value_changed({
                                            data: row_data,
                                            new_value: checkbox_data,
                                            old_value: old_form_data[row_data.column_name]
                                        });
                                        // 如果回调处理了数据则使用，否则使用之前的
                                    }
                                    old_form_data[row_data.column_name] = checkbox_data
                                })
                                break;
                            case "image":
                                if (row_data.default_value) {
                                    $(".finalImg" + row_data.column_name).html(`<img style = "width:263px;height:200px" onclick = "showCutter('${row_data.column_name}','finalImg','${row_data.has_thumb ? "has_thumb" : "false"}')" id = "finalImg${row_data.column_name}" src = "${row_data.default_value}" > `)
                                    $(`input[name = "${row_data.column_name}"]`).val(row_data.default_value)
                                }
                                if (row_data.has_thumb) {
                                    $('.finalImgthumb' + row_data.column_name).html(
                                        `<img  style = "width:263px;height:200px" id = "finalImgthumb${row_data.column_name}" onclick = "showCutter('${row_data.column_name}','finalImgthumb','true')" src = "${row_data.thumb_default_value}" > `
                                    )
                                    if (row_data.thumb_default_value) {
                                        $(`input[name = "${row_data.column_name}_thumb"]`).val(row_data.thumb_default_value)
                                    }
                                }
                                break;
                        }
                    }
                })
            }

        //获取当前输入的数据
        render_inputor.prototype.get_data = function () {
            return layui.form.val(filter_name)
        }

        render_inputor.prototype.hidden_element = function (column_name, display) {
            var array = this._dc_render_data_.data_config.data;
            for (let index = 0; index < array.length; index++) {
                const element = array[index];
                // 获得需查找对象的index
                if (element.column_name == column_name) {
                    $($(`#_dc_ul_${this._dc_render_data_.id}`).children()[index]).css("display", display)
                }
            }
        }
    }
</script>